<template>
	<view>
		<view class="goods_status">
			<view class="info" v-for="(ite, inde) in list" :key="inde">
				<image :src="ite.goods_images[0].full_url"></image>
				<view class="title">
					<view class="title_item">
						<view class="title_left">{{ ite.goods_name }}</view>
						<view class="title_right" v-if="list[0].info.jifen==true">
							<text>{{ ite.info.unit_price }}积分</text>
							<text>X{{ ite.carnum }}</text>
						</view>
						<view class="title_right" v-else>
							<text>￥{{ ite.info.unit_price }}</text>
							<text>X{{ ite.carnum }}</text>
						</view>
					</view>
					<view class="small_title">
						<text v-for="(item,index) in ite.specname[0].goods_props" :key="index">
							{{item.group.name}}:{{item.value.name}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="storebox">

			<!-- <view class="storeinfo">
				<view class="storename">
					<image src="../../static/dp.png"></image>
					<view>{{storeinfo.merch_name}}</view>
				</view>
				<view class="storephone">
					<view>联系电话</view>
					<view class="phone">
						<view>{{storeinfo.mobile}}</view>
						<image @click="callServer()" src="../../static/phone.png"></image>
					</view>
				</view>
			</view> -->
			<!-- <view class="topicbox">
				<view>到店付款</view>
				<view class="pricebox">￥{{inputmoney}}</view>
			</view> -->
			<view class="topicbox">
				<view>店铺优惠</view>
				<view class="pricebox">￥0.00</view>
			</view>
		</view>
		<view class="storebox" style="margin-top: 26rpx;">
			<view class="topicbox" @click="open()">
				<view>商品券/店铺券</view>
				<view style="display: flex;align-items: center;">
					<view style="color: #F94D29;" v-if="couponinfo.coupon_type">
						<text v-if="couponinfo.coupon_type==1">-￥{{couponinfo.coupon_money}}</text>
						<text v-if="couponinfo.coupon_type==3">-￥{{couponinfo.coupon_money}}</text>
						<text v-if="couponinfo.coupon_type==2">{{couponinfo.discount_percent/10}}折</text>
					</view>
					<view class="coupon" v-else>{{couponlong||0}}张可用</view>
					<!-- <view class="coupon">{{couponlong||0}}张可用</view> -->
					<image src="../../static/jt.png"></image>
				</view>
			</view>
			<view class="topicbox">
				<view>会员抵扣</view>
				<view class="pricebox">￥0.00</view>
			</view>
		</view>
		<view class="paybox">
			<view class="titlebox">支付方式</view>
			<!-- v-if="index<=openindex?true:false" -->
			<view class="paytype" v-for="(item,index) in typelist" :key="item.id" @click="handlepaytype(item)">
				<view class="payname">
					<image :src="item.img"></image>
					{{item.title}}
					<!-- <text style="color: #F94D29;" v-if="index==0">{{myinfo.balance||0}}</text>
					<text style="color: #F94D29;" v-if="index==1">{{myinfo.wx_balance||0}}</text> -->
				</view>
				<image v-if="item.id==typeindex" src="../../static/gou.png"></image>
				<image v-else src="../../static/yuan.png"></image>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<view class="navbut">
			<view class="totalprice">
				<text>合计: </text>
				<text style="color: #F94D29;">￥ </text>
				<text style="color: #F94D29;font-size: 38rpx;margin-right: 20rpx;">{{totalPrice}}</text>
				<!-- <text style="color: #F94D29;font-size: 38rpx;margin-right: 20rpx;"v-else>{{inputmoney}}</text> -->
				<text v-if="couponinfo.coupon_type==1"
					style="text-decoration: line-through;color: #888888;">已优惠￥{{couponinfo.coupon_money||0}}</text>
				<text v-if="couponinfo.coupon_type==2"
					style="text-decoration: line-through;color: #888888;">{{couponinfo.discount_percent}}折</text>
				<text v-if="couponinfo.coupon_type==3"
					style="text-decoration: line-through;color: #888888;">已优惠￥{{couponinfo.coupon_money||0}}</text>
			</view>
			<view class="butbox" @click="tosumbit()">提交订单</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<coupon @handlecoupon="handlecoupon" @close="close" :list="couponlist"></coupon>
		</uni-popup>
	</view>
</template>

<script>
	import coupon from '../../components/coupon.vue'
	export default {
		components: {
			coupon
		},
		data() {
			return {
				typelist: [{
						img: '../../static/dou.png',
						title: '优生活余额支付',
						id: 3
					}, {
						img: '../../static/money.png',
						title: '余额支付',
						id: 4
					},
					{
						img: '../../static/wx.png',
						title: '微信支付',
						id: 2
					}
				], //1积分支付 2微信支付  3POS余额支付优生活支付 4账户余额支付
				typeindex: null,
				inputmoney: '', //输入的金额
				storeinfo: {},
				couponlist: [], //优惠券列表
				couponlong: '',
				couponinfo: {},
				coupon_id: '',
				orderid: '', //微信支付的订单
				fding: true,
				myinfo: {},
				list: [],
				goods_ids:[],
			}
		},
		computed: {
			//计算选中商品的总价
			totalPrice() {
				let totalPrice = 0;
				this.newprices = 0
				this.list.map(item => {
					totalPrice += item.carnum * item.info.unit_price
					this.newprices += item.carnum * item.info.unit_price
					this.newprices = parseFloat(this.newprices.toFixed(2))
				})
				if (this.couponinfo.coupon_type == 1) {
					totalPrice = totalPrice - (parseFloat(this.couponinfo.coupon_money) || 0)
				}
				if (this.couponinfo.coupon_type == 2) {
					totalPrice = totalPrice * (parseFloat(this.couponinfo.discount_percent / 100) || 0)
				}
				if (this.couponinfo.coupon_type == 3) {
					totalPrice = totalPrice - (parseFloat(this.couponinfo.coupon_money) || 0)
				}
				return parseFloat(totalPrice.toFixed(2)) // 保留小数点后2位
			},
		},
		onLoad(option) {
			this.inputmoney = option.money
			this.list = (JSON.parse(decodeURIComponent(option.list)))
			console.log(this.inputmoney, this.storeinfo, this.list)
			if (this.list[0].id == 3191||this.list[0].id == 3200) {
				this.typelist = this.typelist.slice(2, 3)
			}
			this.getcouopn()
			this.getinfo()
		},
		methods: {
			getinfo() {
				this.$http({
					url: 'api/wechat/userinfo',
				}).then(res => {
					this.myinfo = res.data
				})
			},
			//选择支付方式
			handlepaytype(item) {
				this.typeindex = item.id
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			//拨打电话
			callServer() {
				uni.makePhoneCall({
					phoneNumber: this.storeinfo.mobile
				})
			},
			//获取优惠卷
			getcouopn() {
				console.log(this.list,'list')
				this.goods_ids = []
				this.goods_ids = this.list.map(item=>item =  item.id)
				console.log(this.goods_ids,'goods_ids',this.goods_ids.join(','))
				this.$http({
					url: 'api/Wechat/getCouponByOrder',
					data: {
						order_money: this.totalPrice,
						type:4,//1商城下单 2外卖下单 3停车场 4商户
						goods_ids:this.goods_ids.join(','),
						merch_id:'',
					}
				}).then(res => {
					this.couponlist = res.data
					this.couponlong = res.data.length
				})
			},
			//获取选择的优惠卷信息
			handlecoupon(result) {
				console.log(result, 'result')
				if (result.id) {
					this.couponinfo = result
					this.coupon_id = ''
					this.coupon_id = result.id
				} else {
					this.couponinfo = {}
					this.coupon_id = ''
				}
				// this.couponinfo = result
				// this.coupon_id =''
				// this.coupon_id = result.id
			},
			//提交
			tosumbit() {
				if (this.typeindex == null) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
					return
				}
				if ((this.list[0].id == 3191||this.list[0].id == 3200) && this.typeindex !== 2) {
					uni.showToast({
						title: '请选择微信支付',
						icon: 'none'
					})
					return
				}
				const goods_id = []
				const spec_id = []
				const goods_num = []
				const goods_price = []
				this.isIntegral = false
				this.list.forEach((item) => {
					if (item.is_points_discount == 1) {
						this.isIntegral = true
					}
					goods_id.push(item.id)
					spec_id.push(item.info.spec_id[0] || '')
					goods_num.push(item.carnum)
					goods_price.push(item.info.unit_price)
				})
				this.goodsid = []
				this.goodsid = goods_id
				console.log(goods_id, spec_id, 123, this.fd)
				if (this.fding) {
					this.fding = false
					setTimeout(() => {
						this.fding = true
					}, 3000)
					this.$http({
						url: 'api/wechat/createSysOrder',
						data: {
							order_type: 5, //5为团购
							goods_id: goods_id,
							spec_id: spec_id,
							goods_num: goods_num,
							goods_price: goods_price,
							order_pay_money: (this.totalPrice * 100) /
							100, //(this.totalPrice*100 + this.freight_money*100)/100,//this.totalPrice,
							order_total_money: (this.newprices * 100) /
							100, // (this.totalPrice*100 + this.freight_money*100)/100,
							pay_type: this.typeindex, //2微信支付 3余额支付order_pay_money
							coupon_id: this.coupon_id,
							pay_type: this.typeindex,
							delivery_method: 2, //配送方式 1快递 2自提
						}
					}).then(res => {
						this.orderid = res.data
						this.fding = false
						if (this.typeindex == 2) { //1积分支付 2微信支付  3POS余额支付 4账户余额支付
							this.wechatPay(this.orderid)
						} else {
							this.balancepay(this.orderid)
							// uni.showToast({
							// 	title: '支付成功',
							// 	icon: 'none'
							// })
							// setTimeout(()=>{
							// 	uni.reLaunch({
							// 		//order_type 1 商品购买订单  2到店支付订单  3外卖订单
							// 		// url:'/pages/orderGoods/orderGoods?type='+(5)+'&currindex=' + this.delivery_method
							// 		url:'/pageshop/goodsorder/goodsorder?type='+(1)+'&order_type='+(2)///0==物流订单，1==自提订单
							// 	})
							// },1000)
						}
					})
				}

			},
			async wechatPay(orderid) {
				const {
					data
				} = await this.$http({
					url: 'api/lklpay/orderPay',
					data: {
						orderid
					},
				})
				let that = this
				uni.requestPayment({
					timeStamp: data.rows.timestamp,
					nonceStr: data.rows.nonce_str,
					package: data.rows.package,
					signType: "RSA",
					paySign: data.rows.pay_sign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/success/success?type=' + (-1) +
									'&order_type=' + (5) + '&delivery_method=' + (
									2)
							})
							// uni.reLaunch({
							// 	//order_type 1 商品购买订单  2到店支付订单  3外卖订单
							// 	// url:'/pages/orderGoods/orderGoods?type='+(5)+'&currindex=' + this.delivery_method
							// 	url: '/pageshop/goodsorder/goodsorder?type=' + (-1) +
							// 		'&order_type=' + (5) + '&delivery_method=' + (
							// 		2) ///0==物流订单，1==自提订单
							// })
						}, 1000)
					},
					fail: function(res) {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					},
				})

			},
			//余额支付接口
			balancepay(orderid) {
				this.$http({
					url: 'api/wechat/balancePay',
					data: {
						orderid: orderid, //
						pay_type: this.typeindex, ////支付类型列表//1积分支付 2微信支付  3POS余额支付 4账户余额支付
					}
				}).then(res => {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
					setTimeout(() => {
						console.log(this.delivery_method, 'this.delivery_method')
						uni.reLaunch({
							url: '/pages/success/success?type=' + (-1) + '&order_type=' +
								(5) + '&delivery_method=' + (2) ///0==物流订单，1==自提订单
						})
						// uni.reLaunch({
						// 	url: '/pageshop/goodsorder/goodsorder?type=' + (-1) + '&order_type=' +
						// 		(5) + '&delivery_method=' + (2) ///0==物流订单，1==自提订单
						// })
					}, 1000)
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	// 	商品信息
	.goods_status {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 38rpx 32rpx 24rpx 28rpx;
		box-sizing: border-box;


		.number {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;

				:first-child {
					color: #555555;
				}
			}

			.right {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #F94D29;
			}
		}

		.info {
			height: 160rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 36rpx;
			gap: 0 28rpx;

			image {
				width: 160rpx;
				height: 160rpx;
				min-width: 160rpx;
				background: #FFFFFF;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				flex-shrink: 0;
			}

			.title {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				flex: 1;

				.title_item {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					gap: 0 58rpx;

					.title_left {
						font-size: 30rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #222222;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						line-height: 1em;
					}

					.title_right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-end;

						:first-child {
							font-size: 28rpx;
							font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
							font-weight: normal;
							color: #222222;
							line-height: 1em;
						}

						:last-child {
							font-size: 24rpx;
							font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
							font-weight: normal;
							color: #555555;
							line-height: 1em;
							margin-top: 20rpx;
						}
					}
				}

				.small_title {
					font-size: 26rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					display: flex;
					flex-wrap: wrap;

					>text {
						margin-right: 5rpx;
					}

					// line-height: 1em;
				}
			}
		}
	}

	.storebox {
		width: 690rpx;
		// height: 386rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 30rpx;

		.storeinfo {
			height: 190rpx;
			border-bottom: solid 2rpx #E9E9E9;

			.storename {
				display: flex;
				height: 116rpx;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 18rpx;
				}
			}

			.storephone {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;

				.phone {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #222222;

					image {
						width: 39rpx;
						height: 39rpx;
						margin-left: 30rpx;
					}
				}
			}
		}

		.topicbox {
			height: 97rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #555555;

			image {
				width: 11rpx;
				height: 19rpx;
				margin-left: 20rpx;
			}

			.pricebox {
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #F94D29;
			}

			.coupon {
				width: fit-content;
				height: 44rpx;
				background: #F94D29;
				border-radius: 8rpx;
				font-size: 26rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #FFFFFF;
				padding: 0 13rpx;
				line-height: 44rpx;
			}
		}
	}

	.paybox {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 40rpx 30rpx 0 30rpx;
		margin-top: 24rpx;

		.titlebox {
			width: 112rpx;
			height: 28rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			background: linear-gradient(180deg, #FFF 70%, #ffedea 100%);
		}

		.paytype {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 97rpx;
			margin-top: 20rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.payname {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #222222;

				image {
					width: 45rpx;
					height: 46rpx;
					margin-right: 20rpx;
				}
			}

		}
	}

	.navbut {
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9;

		.totalprice {
			margin-left: 30rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.butbox {
			margin-right: 30rpx;
			width: 228rpx;
			height: 84rpx;
			background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
			border-radius: 83rpx;
			line-height: 84rpx;
			text-align: center;
			color: #FFF;
		}
	}
</style>